<template>
  <div class="app-container">
    <el-row
      :gutter="20"
      v-loading="loading"
      element-loading-text="后台拼命处理中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-col :span="7" :xs="24">
        <div
          class="grid-content quotatree"
          style="border: 1px solid #d8dce5; height: 700px"
        >
          <QuotaTree
            :showcheckbox="false"
            ref="columnSelect"
            :hasFilter="false"
            :datasourceId="id"
            :isDimension="isDimension"
            @dragNode="handleDragNode"
          />
        </div>
      </el-col>
      <el-col :span="17" :xs="24">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="指标 / 维度" name="first">
            <el-row class="quota">
              <el-col :span="10" style="padding-left: 20px">
                <div
                  style="overflow: auto"
                  class="commomDimension"
                  @drop="drop"
                  @dragover.prevent
                >
                  <el-dropdown
                    v-for="(item, index) in columnList"
                    :key="item.id"
                    trigger="click"
                    style="display: block"
                  >
                    <el-tag  style="margin: 5px; display: block" type="info"
                    effect="plain" class="el-dropdown-link"
                      >{{ item.name }}
                      <i class="el-icon-arrow-down el-icon--right" style="float: right;line-height: 28px;"></i>
                    </el-tag>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="handleClose(index)"
                        >删除</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                  <!-- <DynamicTable
                    style="padding-top: 20px"
                    :showButton="false"
                    ref="dynamicTable"
                    :columnList="columnList"
                  ></DynamicTable> -->
                </div>
              </el-col>
              <el-col :span="12" style="padding: 20px 20px 0 70px">
                <div
                  style="
                    height: 500px;
                    text-align: center;
                    overflow: auto;
                    border: 1px solid #d8dce5;
                  "
                >
                  <div
                    class="commomDim"
                    style="
                      height: 32px;
                      line-height: 32px;
                      text-align: center;
                      border: 1px solid #d8dce5;
                    "
                  >
                    共有维度
                  </div>
                  <div class="common">
                    <el-tree
                      show-checkbox
                      node-key="id"
                      ref="dimTree"
                      :data="dimTreeData"
                      :props="dimTreeProps"
                    ></el-tree>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="margin-top: 20px; padding: 0 20px">
                  <el-button type="primary" @click="resetFrom()"
                    >重置
                  </el-button>
                  <el-button type="primary" @click="createPivotTable">
                    数据透视图
                  </el-button>
                  <!-- <el-button type="primary" @click="createReport">
                    报表
                  </el-button> -->
                  
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QuotaTree from "@/views/quota/modeling/QuotaTree.vue";
import DynamicTable from "@/components/DynamicTable";
import {
  getBeMixedTree,
  getReportJson,
  getBarChartsJson,
  getPieChartsJson,
} from "@/api/quota/define/define.js";

export default {
  name: "MetaTree",
  components: { QuotaTree, DynamicTable },
  data() {
    return {
      activeName: "first",
      //已选维度
      checkList: [],
      tableData: [],
      id: 236,
      allowDrop: false,
      //树结点是否显示checkbox
      showCheckbox: true,
      isDimension: "1",
      columnSelect: [],
      columnList: [],
      droppedItem: "",
      selectColumn: undefined,
      dimTreeData: [],
      dimTreeProps: {
        children: "children",
        label: "dimensionName",
      },
      loading: false,
    };
  },

  watch: {
    columnList: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          let quotaIds = [];
          newVal.forEach((item) => {
            quotaIds.push(item.id);
          });
          getBeMixedTree(quotaIds).then((res) => {
            this.dimTreeData = this.handleTree(res.data, "id", "upperId");
          });
        } else {
          this.dimTreeData = [];
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //生成luckysheet报表
    createReport(){
      let param = this.assemblyParams();
      let length = this.$refs.dimTree.getCheckedKeys().length;
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.loading = true;
      getReportJson(param).then((res) => {
        this.loading = false;
        this.$router.push({
          name: "dimensionReport",
          params: { data: res.data },
        });
      });
    },
    //生成数据透视表
    createPivotTable() {
      let param = this.assemblyParams();
      let length = this.$refs.dimTree.getCheckedKeys().length;
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.loading = true;
      getReportJson(param).then((res) => {
        this.loading = false;
        this.$router.push({
          name: "PivotChart",
          params: { data: res.data },
        });
      });
    },
    //重置
    resetFrom() {
      this.columnList = [];
      this.dimTreeData = [];
    },
    //双击标签删除
    handleClose(idx) {
      this.columnList.splice(idx, 1);
    },
    //跳转到生成图表
    createPie() {
      let param = this.assemblyParams();
      let length = this.$refs.dimTree.getCheckedKeys().length;
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.loading = true;
      getPieChartsJson(param).then((res) => {
        this.loading = false;
        this.$router.push({
          path: "/quota/PieChart",
          query: { data: res.data },
        });
      });
    },
    createLine() {
      let param = this.assemblyParams();
      let length = this.$refs.dimTree.getCheckedKeys().length;
      //let length = this.$refs.dimTree.getCheckedNodes().length
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.loading = true;
      getBarChartsJson(param).then((res) => {
        this.loading = false;
        this.$router.push({
          path: "/quota/LineChart",
          query: { data: res.data },
        });
      });
    },
    createBar() {
      let param = this.assemblyParams();
      let length = this.$refs.dimTree.getCheckedKeys().length;
      //let length = this.$refs.dimTree.getCheckedNodes().length
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.loading = true;
      getBarChartsJson(param).then((res) => {
        this.loading = false;
        this.$router.push({
          path: "/quota/BarChart",
          query: { data: res.data },
        });
      });
    },
    createScatter() {
      //let length = this.$refs.dimTree.getCheckedNodes().length
      let length = this.$refs.dimTree.getCheckedKeys().length;
      let param = this.assemblyParams();
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.$router.push({
        path: "/quota/ScatterChart",
      });
    },
    handlePreview() {
      let param = this.assemblyParams();
      //let length = this.$refs.dimTree.getCheckedNodes().length
      let length = this.$refs.dimTree.getCheckedKeys().length;
      if (JSON.stringify(param.quota) == "{}" || length === 0) {
        this.$message("请先选择指标和公共维度");
        return;
      }
      this.loading = true;
      getReportJson(param).then((res) => {
        this.loading = false;
        this.$router.push({
          name: "dimensionReport",
          params: { data: res.data },
        });
      });
    },
    assemblyParams() {
      //组装查询条件
      let param = {
        quota: {},
        dimension: [],
      };
      //组装指标
      this.columnList.forEach((item) => {
        param.quota[item.id + ""] = item.name;
      });
      //组装维度id
      param.dimension = this.$refs.dimTree.getCheckedKeys();
      return param;
    },
    drop(event) {
      // 判断drop的来源是否为树，与表头的drag/drop事件做区分
      if (this.selectColumn) {
        this.columnList.push(this.selectColumn);
        this.selectColumn = undefined;
      }
    },
    handleDragNode(data) {
      if (data.isQuota) {
        this.selectColumn = data;
      }
    },
  },
};
</script>

<style lang="less">
.common {
  overflow: auto;
  text-align: left;

  .el-tree__empty-text {
    display: none;
  }
}

.commomDimension {
  margin-top: 20px;
  border: 1px solid #dfe4ed;
  height: 500px;
}

.el-tabs__content {
  border: 1px solid #dfe4ed;
  height: 100%;
  overflow: auto;
}

.el-tree {
  display: inline-block;
}

.quotatree {
  overflow: auto;
  text-align: left;
}

.el-tabs__header {
  margin: 0;
}

.el-tabs {
  height: 660px;
}

.el-tabs__nav-wrap {
  border-bottom: 1px solid #dfe4ed;
}
</style>
